<!DOCTYPE html>
<html layout:decorator="fragments/layout" th:with="index='admin',son='role'" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.thymeleaf.org/" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>权限组管理</title>
    <link rel="stylesheet" th:href="@{/css/ztree/metroStyle.css}"/>
</head>
<body>
<div layout:fragment="modal">
    <div class="modal" id="createModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">添加权限组</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="box-body">
                            <input type="hidden" class="form-control" id="c-role-id" value="0"/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">权限组名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="c-description" placeholder="请输入权限组名称"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">编号</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="c-role" placeholder="请输入编号"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">权限选择</label>
                                <div class="col-sm-10">
                                    <ul id="treeDemo" class="ztree"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="createModalAdd">添加</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div layout:fragment="content">

    <section class="content-header">
        <h1>
            管理员管理
            <small>权限组管理</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-user"></i> 管理员管理</a></li>
            <li class="active" th:href="@{~/admins/roles}">权限组管理</li>
        </ol>
    </section>

    <section class="content">
        <div class="box">
            <div class="box-body">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <button type="button" id="addRole"
                                    class="btn btn-primary">添加权限组
                            </button>
                        </div>
                    </div>
                </div>
                <table id="role-table" class="table table-bordered table-hover table-striped">
                    <thead align="text-center">
                    <tr>
                        <th>id</th>
                        <th>编号</th>
                        <th>权限组名</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="role: ${roles}">
                        <td th:text="${role.id}"></td>
                        <td th:text="${role.role}"></td>
                        <td th:text="${role.description}"></td>
                        <td th:text="${#calendars.format(role.created,'yyyy.MM.dd')}"></td>
                        <td>
                            <div class="btn-group" th:unless="${role.role == 'root'}">
                                <button th:attr="data=${role.id},role-data=${role.role},d-data=${role.description}"
                                        class="modify btn btn-xs btn-info">修改
                                </button>
                                <button th:attr="data=${role.id},role-data=${role.role}"
                                        class="delete btn btn-xs btn-danger">删除
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </section>

</div>

<div layout:fragment="js">
    <script type="text/javascript" th:src="@{~/js/ztree/jquery.ztree.all.min.js}"></script>
    <script>
        var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            async: {
                enable: true,
                url: "/admins/rolePermissions",
                type: "get",//默认post
                otherParam: {"roleId": "1"},
            },
            view: {showIcon: false}
        };

        setting.check.chkboxType = {"Y": "ps", "N": "ps"};

        var zNodes = [];
        $(document).ready(function () {
            var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $('#role-table tbody').on('click', 'tr button.delete', function (e) {
                e.preventDefault();
                var role = $(this).attr('role-data');
                var roleId = $(this).attr('data');
                swal({
                    title: "删除该编号【" + role + "】的权限组",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#5ECD1E",
                    confirmButtonText: "Yes, 确定",
                    cancelButtonText: "No, 取消",
                    closeOnConfirm: true,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: "/admins/roles/" + roleId,
                            type: "delete",
                            dataType: "json",
                            success: function (data) {
                                if (data.code == 200) {
                                    toastr.success("删除成功");
                                    location.reload(true)
                                } else {
                                    toastr.error(data.msg);
                                }
                            }
                        });
                    }
                });
            });

            $('#role-table').find('tbody').on('click', 'tr button.modify', function (e) {
                e.preventDefault();
                var role = $(this).attr('role-data');
                var roleId = $(this).attr('data');
                var description = $(this).attr('d-data');

                console.log("roleId:" + roleId);
                $('#c-role-id').val(roleId);
                $('#c-role').val(role);
                $('#c-description').val(description);

                treeObj.setting.async.otherParam = [];
                treeObj.setting.async.otherParam = {"roleId": roleId};
                treeObj.reAsyncChildNodes(null, "refresh");
                $('#createModalAdd').html("更新")
                $('.modal-title').html("更新权限组【" + description + "】");
                $('#createModal').modal("show");
            });

            $('#addRole').on('click', function (e) {
                e.preventDefault();
                $('#c-role-id').val(0);
                treeObj.setting.async.otherParam = [];
                treeObj.setting.async.otherParam = {"roleId": 0};
                treeObj.reAsyncChildNodes(null, "refresh");
                $('#createModalAdd').html("添加")
                $('.modal-title').html("添加权限组");

                $('#createModal').modal("show");
            })

            var checked = [];

            $('#createModal').on('show.bs.modal', function (e) {
                checked = [];
            })

            $('#createModalAdd').on('click', function (e) {
                e.preventDefault();
                var role = $('#c-role').val();
                var description = $('#c-description').val();
                var roleId = $('#c-role-id').val();

                if (isNull(description)) {
                    toastr.error("权限组名称不能为空");
                    return;
                }
                if (isNull(role)) {
                    toastr.error("权限组编号不能为空");
                    return;
                }

                var nodes = treeObj.getCheckedNodes(true);

                $.each(nodes, function (i, val) {
                    var index = checked.indexOf(val.id);
                    if (index < 0) {
                        //如果找不到 则添加
                        checked.push(val.id);
                    }
                });

                $.ajax({
                    url: "/admins/rolePermissions",
                    type: "post",
                    data: "roleId=" + roleId + "&role=" + role + "&description=" + description + "&pids=" + checked.join(","),
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 200) {
                            $('#createModal').modal("toggle");
                            if (roleId == 0 || roleId == '0') {
                                toastr.success("添加成功");
                            } else {
                                toastr.success("更新成功");
                            }
                            location.reload(true)
                        } else {
                            toastr.error(data.msg);
                        }
                    }
                });

//                console.log(JSON.stringify(checked));
            })
        })
    </script>
</div>
</body>
</html>
